<template>
  <div>
    <el-collapse class="top">
        <el-collapse-item title="标的物类型" name="1" class="line">
            <!-- <div :class="[item1 == bdlxSelected ? 'selected' : 'item']" index="-1" item1="不限"  @click="choose1(-1, '不限')">不限</div> -->
            <div :class="[item1.value == bdlxSelected ? 'selected' : 'itemSelect']" v-for="(item1, index) in bdlx" :key="index" @click="choose1(index, item1)">
                <el-popover
                    placement="right"
                    width="200"
                    trigger="click">
                    <div :class="[item11 == bdlxSelected2 ? 'selectedInner' : 'itemInner']" v-for="(item11, index) in bdlx2" :key="index" @click="choose11(item1,item11)">{{ item11 }}</div>
                    <div slot="reference">{{ item1.value }}</div>
                </el-popover>
            </div>
        </el-collapse-item>
        <el-collapse-item title="标的物所在地" name="2" class="line">
            <!-- <div :class="[index == choice2 ? 'selected' : 'item']" index="-1" @click="choose2(-1, '不限')">不限</div> -->
            <div :class="[item2.name == bdszdSelected ? 'selected' : 'itemSelect']" v-for="(item2, index) in bdszd" :key="index" @click="choose2(index, item2)">
                <el-popover
                    placement="right"
                    width="200"
                    trigger="click">
                    <div :class="[item22 == bdszdSelected2 ? 'selectedInner' : 'itemInner']" v-for="(item22, index) in bdszd2" :key="index" @click="choose22(item2,item22)">{{ item22 }}</div>
                    <div slot="reference">{{ item2.name }}</div>
                </el-popover>
            </div>
        </el-collapse-item>
        <el-collapse-item title="拍卖会状态" name="3" class="line">
            <!-- <div :class="[index == choice3 ? 'selected' : 'item']" index="-1" @click="choose3(-1, '不限')">不限</div> -->
            <div :class="[item3 == pmztSelected ? 'selected' : 'itemSelect']" v-for="(item3, index) in pmzt" :key="index" @click="choose3(index, item3)">{{ item3 }}</div>
        </el-collapse-item>
        <el-collapse-item title="开拍时间" name="4" class="line">
            <!-- <div :class="[index == choice4 ? 'selected' : 'item']" index="-1" @click="choose4(-1, '不限')">不限</div> -->
            <div :class="[item4 == kpsjSelected ? 'selected' : 'itemSelect']" v-for="(item4, index) in kpsj" :key="index" @click="choose4(index, item4)">{{ item4 }}</div>
            
            <span class="block">
                <el-date-picker
                v-model="kssj"
                type="date"
                placeholder="开始日期">
                </el-date-picker>
            </span>
            
            <span class="block" style="margin-left: 10px;">
                <el-date-picker
                v-model="jssj"
                type="date"
                placeholder="结束日期">
                </el-date-picker>
            </span>

        </el-collapse-item>
    </el-collapse>
    <div style="text-align: center;">
        <el-button type="primary" @click="submit" >确定</el-button>
    </div>
    

        <!-- <div class="row">
            <div class="title">开拍时间</div>
            <div class="item">不限</div>
            <el-date-picker
            v-model="testTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
            <div style="flex: 1;"></div>
            <el-button type="primary">确定</el-button>
        </div> -->

    <div class="middle">
        <div class="lot" v-for="(item, index) in bd" :key="index" @click="to1(item)">
            <img :src="item.sctp"/>
            <!-- <div style="width: 200px; margin: 0 auto; height: 10px; background-color: rgb(240, 240, 240);"></div> -->
            <div class="text">
                <div class="name">{{ item.bdmc }}</div>
                <div class="price">当前价{{ item.blj }}元({{ item.number }}次出价)</div>
                <!-- <div class="time">{{ item.czsj }}</div> -->
            </div>
        </div>
    </div>
    
  </div>
</template>

<script>
import { getBdlx,getBdszd,getPmzt,getKpsj,getBd } from '@/api/lotType/lotType';

export default {
    data(){
        return{
            index: -1,
            bdlx: [],
            bdszd: [],
            pmzt: [],
            kpsj: [],
            time: '',
            choice1: -1,
            choice2: -1,
            choice3: -1,
            choice4: -1,
            bdlxSelected: '不限',
            bdszdSelected: '不限',
            pmztSelected: '不限',
            kpsjSelected: '不限',
            bdlxSelected2: '',
            bdszdSelected2: '',
            bd: [],
            bdlxQuery: '',
            bdszdQuery: '',
            bdlxId: 0,
            bdszdId: 100000,
            bdlx2: [],
            bdszd2: [],
            bdlxSubmit: '',
            bdszdSubmit: '',
            testTime: '',
            kssj: '',
            jssj: '',

        }
    },
    methods: {
        getAll(){
            getBdlx(this.bdlxId).then((res) => {
                if(res){
                    this.bdlx.push({
                        value: '不限',
                    });
                    for(let item of res.data){
                        this.bdlx.push(item);
                    }
                    // console.log(this.bdlx);
                }
            });
            getBdszd(this.bdszdId).then((res) => {
                if(res){
                    this.bdszd.push({
                        name: '不限',
                    });
                    for(let item of res.data){
                        this.bdszd.push(item);
                    }
                    // console.log(this.bdszd);
                }
            });
            getPmzt().then((res) => {
                if(res){
                    this.pmzt.push('不限');
                    for(let item of res.data){
                        this.pmzt.push(item.value);
                    }
                }
            });
            // getKpsj().then((res) => {
            //     if(res){
            //         this.kpsj.push('不限');
            //         for(let item of res.data){
            //             this.kpsj.push(item.value);
            //         }
            //     }
            // });
        },
        getBdlx2(id){
            getBdlx(id).then((res) => {
                if(res){
                    for(let item of res.data){
                        this.bdlx2.push(item.value);
                    }
                }
            });
        },
        getBdszd2(id){
            getBdszd(id).then((res) => {
                if(res){
                    for(let item of res.data){
                        this.bdszd2.push(item.name);
                    }
                }
            })
        },
        choose1(index, item){
            // console.log(index);
            // console.log('choose1',item);
            this.choice1 = index;
            this.bdlxSelected = item.value;
            console.log('bdlxSelected',this.bdlxSelected);
            this.bdlxSubmit = item.value;
            // this.bdlxId = item.id;
            this.bdlx2 = [];
            if(item.id){
                this.getBdlx2(item.id);
            }
        },
        choose11(item1,item11){
            // console.log(item1.value);
            // console.log(item11);
            this.bdlxSelected2 = item11;
            this.bdlxSubmit = item1.value + ',' + item11;
        },
        choose2(index, item){
            this.choice2 = index;
            this.bdszdSelected = item.name;
            this.bdszdSubmit = item.name;
            // this.bdszdId = item.id;
            this.bdszd2 = [];
            if(item.id){
                this.getBdszd2(item.id);
            }
        },
        choose22(item2,item22){
            this.bdszdSelected2 = item22;
            this.bdszdSubmit = item2.name + ',' + item22;
        },
        choose3(index, item){
            this.choice3 = index;
            this.pmztSelected = item;
        },
        choose4(index, item){
            this.choice4 = index;
            this.kpsjSelected = item;
        },
        submit(){
            this.kssj = (this.formatTime(this.kssj)).substring(0,10);
            this.jssj = (this.formatTime(this.jssj)).substring(0,10);
            this.bd = [];
            let bdlxTemp = this.bdlxSelected;
            let bdszdTemp = this.bdszdSelected;
            let pmztTemp = this.pmztSelected;
            let kpsjTemp = this.kpsjSelected;
            let bdlxTemp2 = this.bdlxSelected2;
            let bdszdTemp2 = this.bdszdSelected2;
            if(this.bdlxSubmit == '不限')
            {
                this.bdlxSubmit = '';
            }
            if(this.bdszdSubmit == '不限')
            {
                this.bdszdSubmit = '';
            }
            if(this.pmztSelected == '不限')
            {
                this.pmztSelected = '';
            }
            // if(this.kpsjSelected == '不限')
            // {
            //     this.kpsjSelected = 0;
            // }
            // else{
            //     this.kpsjSelected = this.kpsjSelected.replace(/[^\d]/g, '');
            // }
            console.log('bdlxSubmit',this.bdlxSubmit);
            console.log('bdszdSubmit',this.bdszdSubmit);
            console.log('kssj',this.kssj);
            console.log('jssj',this.jssj);
            let data = 'kssj=' + this.kssj + '&jssj=' + this.jssj + '&bdlx=' + this.bdlxSubmit + '&szd=' + this.bdszdSubmit + '&pmhzt=' + this.pmztSelected + '&pageno=1&countonepage=10';
            getBd(data).then((res) => {
                if(res){
                    // console.log('res',res.data.list);
                    this.bd = res.data.list;
                    for(let i = 0; i < res.data.list.length; i++){
                        this.bd[i].czsj = this.formatTime(res.data.list[i].czsj);
                    }
                    // console.log(this.bd);
                    this.bdlxSelected = bdlxTemp;
                    this.bdszdSelected = bdszdTemp;
                    this.pmztSelected = pmztTemp;
                    this.kpsjSelected = kpsjTemp;
                    this.bdlxSelected2 = bdlxTemp2;
                    this.bdszdSelected2 = bdszdTemp2;
                    // console.log(this.bdlxSelected);
                    // console.log(this.bdszdSelected);
                }
            })
        },
        formatTime(time){
            var dateee = new Date(time).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
        },
        to1(item){
            this.$router.push({
                path: '/lot',
                query: {
                    bdbh: item.bdbh
                },
            })
        },
    },
    mounted(){
        this.getAll();
        
        this.choose1(-1,{
            value: '不限'
        });
        this.choose2(-1,{
            name: '不限'
        });
        this.choose3(-1,'不限');
        this.choose4(-1,'不限');
        if(this.$route.query.bdlx){
            this.bdlxQuery = this.$route.query.bdlx;
            // console.log(this.bdlxQuery);
            this.bdlxSelected = this.bdlxQuery
        }
        if(this.$route.query.bdszd){
            this.bdszdQuery = this.$route.query.bdszd;
            // console.log(this.bdszdQuery);
            this.bdszdSelected = this.bdszdQuery
        }
        this.kssj = (this.formatTime(Date.now())).substring(0,10);
        this.jssj = (this.formatTime(Date.now())).substring(0,10);

    }
}
</script>

<style lang="less" scoped>
/deep/.el-collapse-item__header{
    height: auto !important;
    display: block !important;
    // background-color: #3d40e5;
}
/deep/.el-card__body, .el-main{
    padding: 0px 20px !important;
    // background-color: #3d40e5;
}
.itemSelect{
    margin: 10px;
    padding: 4px;
    display: inline-block; 
    cursor: pointer;
}
.itemSelect:active{
    background-color: #3d40e5;
    color: #fff;
    cursor: pointer;
}
.selected{
    background-color: #3d40e5;
    color: #fff;
    margin: 10px;
    padding: 4px;
    display: inline-block; 
    cursor: pointer;
    font-size: 13px;
}
.top{
    background-color: #fff;
    padding: 2px;
    margin: 0 100px;
    // font-weight: bold;
    text-align: center;
}
.top .line{
    display: inline-block; 
    // padding: 2px; 
    height: auto; 
    margin: 10px auto; 
    width: 96%;
    text-align: left;
}
// .top .line .item{
//     margin: 10px;
//     padding: 4px;
//     display: inline-block; 
//     cursor: pointer;
// }
// .top .line .item:active{
//     background-color: #3d40e5;
//     color: #fff;
//     cursor: pointer;
// }
.itemInner{
    margin: 10px;
    padding: 4px;
    display: inline-block; 
    cursor: pointer;
    font-size: 13px;
}
.selectedInner{
    background-color: #3d40e5;
    color: #fff;
    margin: 10px;
    padding: 4px;
    display: inline-block; 
    cursor: pointer;
    font-size: 13px;
}
// .top .line a:link{
//     font-weight: normal;
//     color: #444;
// }
// .top .line a:visited{
//     font-weight: bold !important;
//     color: #3d40e5 !important;
// }
.middle{
    margin: 50px 100px 0 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.middle .lot{
    width: 23%;
    background-color: #fff;
    // padding: 10px;
    margin: 10px 1%;
}
.middle .lot img{
    // padding: 10px;
    width: 200px;
    height: 150px;
}
.middle .lot .text .name{
    font-weight: bold;
}
</style> 